import { FC, useEffect, useState } from 'react';
import { Table, Input, Button, Switch, Pagination, Form, message, Modal,Popconfirm  } from 'antd';
import { getList, deladmin } from '../../apis/administrator'
import '../../static/css/administrator/admList.css'
import { useNavigate } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { assert } from 'console';
import { deserialize } from 'v8';
// import Form from 'antd/lib/form/Form';

interface Iparams {
  page: number,
  pageSize: number,
  idorname?: string
}

const AdmList: FC<any> = (props: any): JSX.Element => {
  const navigate = useNavigate();
  const [params, setParams] = useState<Iparams>({
    page: 1,
    pageSize: 7
  });
  const [list, setList] = useState<any>([]);

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);//定义一个数组 全选

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {//事件
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,//选中id
    onChange: onSelectChange,
  };

  // 分页
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 7,
    total: 0,
    // showSizeChanger: true,
    showQuickJumper: true
  })
  // 切换分页
  const pageChange = (page: number, pageSize: number) => {
    setParams({ ...params, page })
    setPagination({ ...pagination, current: page, pageSize });
  }

  // 列表
  const getData = async () => {
    const res: any = await getList(params);
    // console.log(res);
    if (res.code === '00000') {
      setList(res.data)
      // console.log(res.total);
      // console.log(list);
      
      setPagination({ ...pagination, total: res.total })
    }
  }

  // 修改
  const amend = (id: number) => {
    return (() => {
      navigate(`/index/administratorAdd/${id}/2`)
      console.log(id);
    })
  }

  // 添加传3
  const addamd = ()=>{
    navigate('/index/administratorAdd/add/3')
  }
  // 详情传1

  // 详情
  const particulars = (id: number) => {
    return (() => {
      navigate(`/index/admindetail/${id}`)
      console.log(id);
    })
  }



  // 查询
  const onSearch = (e: any) => {

    setParams({ ...params, page: 1, ...e })

    message.success('查询成功');
  }

  // 删除
  // 定义aa接受id
  const [aa, seAa] = useState<any>(0);
  const del = (id: any) => {
    return () => {
      // 存储id
      seAa(id)

    }
  }
  const des=async (e:any)=>{
    // 传过来的id
    console.log(aa,e);
    const res:any = await deladmin({admin_id:aa})
    // console.log(res);
    if(res.code==='00000'){
      message.success('删除成功');
      getData()
    }else{
      message.error(res.msg)
    }
    
  }
  // 批量删除
  const [idd,setIdd] = useState<any>([1])
  const delAll = () => {
    // console.log(selectedRowKeys);
    setIdd(selectedRowKeys)
  }
  // 点击确认回调
  const confirm = async () => {
    // console.log(e);
    // console.log(idd);
    const res:any = await deladmin({admin_id:idd})
    // console.log(res);
    if(res.code==='00000'){
      message.success('删除成功');
      getData()
    }else{
      message.error(res.msg)
    }
  };


  // const ass = () => {
  //   Modal.confirm({
  //     title: '提示',
  //     icon: <ExclamationCircleOutlined />,
  //     content: '此操作将永久删除该数据, 是否继续?',
  //     okText: '确认',
  //     cancelText: '取消',
  //     onOk: hideModal
  //   });
  // }
 



  useEffect(() => {
    getData()
  }, [params])

  const columns = [
    {
      title: '管理员名称',
      dataIndex: 'admin_name',
      key: 'admin_name',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: (text: number) => (<div>
        {text === 1 ? '经管负责人' : '部门负责人'}
      </div>)
    },
    {
      title: '真实姓名',
      dataIndex: 'real_name',
      key: 'real_name',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
    },
    {
      title: '是否启用',
      dataIndex: 'is_enabled',
      key: 'is_enabled',
      render: (text: number) => (<div>
        <Switch />
        {/* if(is_use) */}
        
      {/* <Form
        // ref={formRef}
        // labelCol={{ span: 5 }}
        // wrapperCol={{ span: 14 }}
        // onFinish={onFinish}
        layout="horizontal">
          <Form.Item name="is_enabled" valuePropName="checked" rules={[{ required: true }]}>
            <Switch />
          </Form.Item>
          </Form> */}
      </div>)
    },
    {
      title: '操作',
      dataIndex: 'admin_id',
      render: (text: number) => (<div className='operationbut'>
        <Button onClick={amend(text)} type="primary" size='middle' className='amend'>修改</Button>
        {/* <Button onClick={del(text)} type="primary" size='middle' danger className='del'>删除</Button> */}

        <Popconfirm title="此操作将永久删除该数据, 是否继续?" okText="确认" onConfirm={des} cancelText="取消">
          <Button size='middle' className='del' onClick={del(text)}>删除</Button>
        </Popconfirm>


        <Button onClick={particulars(text)} type="primary" size='middle' className='particulars'>详情</Button>
      </div>)
    }
  ];

  return (
    <div>
      <div className='help'>
        <Form onFinish={onSearch} name="customized_form_controls" layout="inline">
          <Form.Item name='idorname'>
            <Input placeholder="输入要查询的管理员名称" className='inpsearch' />
          </Form.Item>
          <Button type="primary" size='middle' className='seachbut' htmlType='submit'>查询</Button>
          <Button type="primary" size='middle' className='seachbut' onClick={addamd}>添加</Button>
          {/* <Button type="primary" size='middle' className='seachbut' danger onClick={delAll}>批量删除</Button> */}

          

          
  <Popconfirm
    title="此操作将永久删除该数据, 是否继续?"
    onConfirm={confirm}
    // confirm={confirm}
    okText="确认"
    cancelText="取消"
  >
    <Button type="primary" size='middle' className='seachbut' danger onClick={delAll}>批量删除</Button>
  </Popconfirm>



        </Form>
      </div>
      <Table rowSelection={rowSelection} pagination={false} rowKey="admin_id" dataSource={list} columns={columns} />
      <Pagination {...pagination} onChange={pageChange} />
    </div>
  )
}
export default AdmList;